<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid - repeat()用法示例</title>
  <style>
    /* 全局样式，方便查看效果 */
    * {
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    .grid-container {
      display: grid;
      grid-gap: 20px;/* 这个的意思是每一行之间的间隔，可以设置百分比,但是百分比后，就出现了问题，百分比大了之后，就像浮动，可能会出来父元素的边框，然后因为网格的宽度是不固定的，所以设置百分比后，每一行的宽度就不一样了 */
      background-color: lightgray;
      padding: 10px; 
    }

    .item {
        /* item不要加宽度 */
      background-color: lightblue;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
    <h2>1. 没有repeat的用法，固定列，宽重复</h2>
    <p>fr单位是一个灵活长度单位，它是fraction(分数；小数;比例)的缩写，代表可用空间的一个分数。
        1fr表示可用空间的一个等分单位，而2fr表示两个等分单位。
        当你设置grid-template-columns: 1fr;时，每个列都将获得相同大小的空间，即每个列将平均分
        配容器的可用宽度
        当你使用2fr时，它表示该列将获得比设置为1fr的列多一倍的空间。例如，
        如果你有一个grid-template-columns: 1fr 2fr;的设置，那么第二个列的宽度将是第一个列的两倍。
        同时，只有一个1fr的列将占据剩余的空间。有一个1fr，就是一列，两个1fr就是两列，三个1fr就是三列，以此类推。
        所以，如果你的网格有3列，你就可以设置grid-template-columns: 1fr 1fr 1fr;来创建一个3列的网格，
        
    </p>
  <div class="grid-container" style="grid-template-columns:1fr 1fr;">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  <p>如果有grid-template-columns: 1fr 3fr 2fr;,就是说有3列，第一列占1fr，第二列占3fr，第三列占2fr。第一列占1fr，所以第一列的宽度是整个网格的1/3，第二列占3fr，所以第二列的宽度是整个网格的1/3，第三列占2fr，所以第三列的宽度是整个网格的1/6，所以总宽度是1/3+1/3+1/6=1。</p>
  <div class="grid-container" style="grid-template-columns:1fr 3fr 2fr; ">
    <div class="item">1</div>
    <div class="item">3fr</div>
    <div class="item">2fr</div>
    <div class="item">1</div>
    <div class="item">2</div>
  </div>
  <p>也可以是这种固定列 宽的写法，有一个100px和一个200px，有这两个，就是有两列，有几个，就是几列</p>
  <div class="grid-container" style="grid-template-columns:100px 200px; ">

    <div class="item">100px</div>
    <div class="item">200px</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>

  <h2>1. 基本的repeat用法，固定列宽重复</h2>
  <p>一、repeat的语法
    repeat(count, size)
    count：表示重复的次数，必须是一个正整数。
    size：表示要重复的轨道大小，可以是长度单位（如 px、em、rem 等）、百分比或者分数单位（fr）等。</p>
  <div class="grid-container" style="grid-template-columns: repeat(3, 100px);">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>

  <h2>2. 使用fr单位重复, 固定列 宽重复,3就是3列，1fr就是每个占一份，平均分配，有的我换行，</h2>
  <div class="grid-container" style="grid-template-columns: repeat(3, 1fr);">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">1</div>
    <div class="item">2</div>
    
  </div>

  <h2>3. 混合不同单位重复</h2>
  <p>这里要注意一下repeat的参数，第一个参数是重复的次数，第二个参数是重复的轨道大小，
    3，就是重复三次，这两有两个参数，一个100px，一个1fr，就是重复100px和1fr的，重复三次，
    所以也就始终会是6列，但是第一列始终是100px，1fr的，就是自适应，如果空间不够，1fr的
  会很小，如果空间够大，1fr的也就是会无限大</p>
  <div class="grid-container" style="grid-template-columns: repeat(3, 100px 1fr);">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>

  
  <h2 style="color: brown;">5. 使用auto-fit和auto-fill关键字关键字，最常用，弹性布局</h2>
  <p>这两个好像没有什么区别，都是自动填充，这里用auto-fill，放在了列的位置了，也就是说，
    会自动填充列数，主要是minmax(100px, 1fr)，100px就是最小宽度为100，最大宽度为1fr也就是最大
    可以占一份,比如在不考虑间距grid-gap的情况下，如果父元素宽度是150px，因为最小宽度为100px，
    ，如果放两个，一个就是75了，小于最小100的设定了，所以就只能放一下，但这一个会自动填充，
  变成150，如果父元素是230，满足最小100，可以放两个，但是一个是115，会平均分配父元素，
也就是说，minmax(100px, 1fr),就是最小宽度为100px,在满足100的情况下，会有尽量多的列数，
而多余的空间会自动分配，父元素880，子元素在100px的 情况下，可以最多放8列，但还剩80，
这80就会平均分配给这8列，所以每列将是110px</p>
  <div class="grid-container" style="grid-template-columns: repeat(auto-fill,  minmax(200px, 1fr));">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  <h2>5. 使用auto-fit关键字</h2>
  <div class="grid-container" style="grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>

  <h2>6. repeat()嵌套</h2>
  <div class="grid-container" style="grid-template-columns: repeat(2, repeat(2, 1fr))">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</body>
</html>